import React, { useState,useEffect ,useContext} from 'react'
import {useHistory} from 'react-router-dom'
import { List, Avatar, Card,Skeleton } from 'antd';
import { RightOutlined, FileDoneOutlined , FireOutlined,FieldTimeOutlined,HeartOutlined } from '@ant-design/icons';
import './homelist.less'
import {HomeContext} from '../../pages/home/home'
import TimeChanger from '../../utils/timeChanger'
const Homelist = ()=>{
    //获取父组件传来的文章摘要数据
    const passagesbrief = useContext(HomeContext);




    const [loading, setloading] = useState(false);

    const history = useHistory()
    const goDetail = (ID)=>{
        //console.log(item)
        //console.log("这是history",history)
        history.push(`/passagedetail/${ID}`)
    }
    useEffect(() => {
        console.log('这时passagebrief',passagesbrief)
    }, [passagesbrief]);
    return(
        <List
        itemLayout="horizontal"
        dataSource={passagesbrief}
        //src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" 
        renderItem={item => (
            <List.Item>
            <Skeleton loading={loading} avatar active>
                <Card
                    style={{ width: '100%', margin: '2rem' }}
                    actions={[
                        <div style={{display:'flex'}}>
                        <div style={{fontSize:'.8rem',marginLeft:'.8rem'}}>
                            <FieldTimeOutlined />&nbsp;&nbsp;
                            <span>{TimeChanger(item.create_time)}</span>
                        </div>
                        <div style={{fontSize:'.8rem',marginLeft:'.8rem'}}>
                            <FireOutlined />&nbsp;&nbsp;
                            <span >{item.visited}</span>
                        </div>
                        <div style={{fontSize:'.8rem',marginLeft:'.9rem'}}>
                            <HeartOutlined />&nbsp;&nbsp;
                            <span >{item.stars}</span>
                        </div>
                        {
                            //flex:1 flex:grow:1默认等分剩余空间，flex-shrink:1剩余空间不足自动收缩，flex-basic:0%
                        }
                        <div style={{fontSize:'.8rem',flex:1,marginRight:'.8rem',textAlign:'right'}}>
                            <div className='see-all-message' onClick={()=>goDetail(item._id)}>
                                <FileDoneOutlined />&nbsp;&nbsp;
                                <span style={{cursor:'pointer'}} >查看全文</span>
                                <RightOutlined />
                            </div>
                        </div>
                        </div>
                    ]}
                >
                        <Card.Meta
                            avatar={
                                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                            }
                            title={item.title}
                            description={item.info}
                        />
                </Card>
            </Skeleton>
            </List.Item>
        )}
    />
    )
}

export default Homelist